import React from 'react'
import { connect } from 'dva'
import moment from 'moment'
import { Modal, Input, Popconfirm, Button, message } from 'antd'
import ChartTimeBar from '@/components/ChartTimeBar'

const { TextArea } = Input

@connect(({ staffPersonal, loading }) => ({
  staffPersonal,
  loading: loading.effects['staffPersonal/fetchPersonal'],
}))
class StaffPersonal extends React.PureComponent {

  state = {
    visible: false,
    task_id: '0',
    value: '',
    task_status: ''
  }

  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'staffPersonal/fetchPersonal'
    })
  }

  onPlotClick = e => {
    const { dispatch } = this.props
    const { data = {} } = e
    const { _origin = {} } = data
    // eslint-disable-next-line
    const { id, task_status } = _origin
    if (id) {
      this.setState(state => ({ ...state, task_id: id, task_status, visible: true }), () => {
        dispatch({
          type: 'staffPersonal/projectRemarkList',
          payload: { task_id: id }
        })
      })
    } else {
      message.error('请选中时间条形图')
    }
  }

  handleModelCancel = e => {
    e.preventDefault()

    this.setState(state => ({ ...state, visible: false }))
  }

  handleRemarkChange = e => {
    e.preventDefault()

    const { value } = e.target
    this.setState(state => ({ ...state, value }))
  }

  handleRemarkSubmit = e => {
    e.preventDefault()

    const { dispatch } = this.props
    // eslint-disable-next-line
    const { task_id, value } = this.state
    dispatch({
      type: 'staffPersonal/projectRemarkEdit',
      payload: { task_id, remark: value }
    })
  }

  handleFinishSubmit = e => {
    e.preventDefault()

    const { dispatch } = this.props
    // eslint-disable-next-line
    const { task_id } = this.state
    // 完成提交
    dispatch({
      type: 'staffPersonal/projectFinish',
      payload: { task_id }
    })
  }

  render() {
    const { staffPersonal } = this.props
    const { visible } = this.state
    const { list, remark } = staffPersonal

    const data = []
    const values = ['计划交付时间', '计划提前交付时间', '计划延迟交付时间', '已终止']
    // list.forEach(({ task_id, po_name, po_start, po_end, po_finish, po_status }) => {
    // eslint-disable-next-line
    list.forEach(({ task_id, po_name, ta_start, ta_end, ta_finish, task_status }) => {
      // eslint-disable-next-line
      const id = Number(task_id)
      // eslint-disable-next-line
      const name = `${po_name}@${Math.random()}`
      const start = moment(ta_start).valueOf()
      const end = moment(ta_end).valueOf()
      const finish = moment(Number(ta_finish)).valueOf()
      const status = Number(task_status) - 1
      const formatStart = moment(start).format('YYYY-MM-DD HH:mm:ss')
      const formatEnd = moment(end).format('YYYY-MM-DD HH:mm:ss')
      const formatFinish = moment(finish).format('YYYY-MM-DD HH:mm:ss')
      // console.log(id, name, start, end, finish, status, formatStart, formatEnd, formatFinish)
      // 进行中
      if (status === 0) {
        const range = [formatStart, formatEnd]
        const sta = values[status]
        data.push({ id, name, range, status: sta, task_status })
      }
      // 已完成
      if (status === 1) {
        let range = [formatStart, formatEnd]
        let sta = ''
        if (end > finish && finish > start) {
          range = [formatStart, formatFinish]
          sta = values[status]
          data.push({ id, name, range: [formatFinish, formatEnd], status: values[0], task_status })
        }
        if (finish > end) {
          range = [formatEnd, formatFinish]
          sta = values[status + 1]
          data.push({ id, name, range: [formatStart, formatEnd], status: values[1], task_status })
        }
        data.push({ id, name, range, status: sta, task_status })
      }
      // 已终止
      if (status === 2) {
        const range = [formatStart, formatEnd]
        const sta = values[status + 1]
        data.push({ id, name, range, status: sta, task_status })
      }
    })

    return (
      <section style={{backgroundColor: '#fff', padding: 16}}>
        <ChartTimeBar 
        height={500} 
        data={data} 
        onPlotClick={this.onPlotClick} 
        GeomColor={['#74d0d0', '#52c41a', '#fadb14', '#bfbfbf']} 
        />
        <Modal
          visible={visible}
          closable={false}
          footer={null}
          width={500}
          onCancel={this.handleModelCancel}
          destroyOnClose="true"
        >
          <section style={{marginBottom: 16}}>
            <Popconfirm 
              title="确认提交？" 
              onConfirm={this.handleFinishSubmit} 
              okText="确认" 
              cancelText="取消"
            >
              <Button 
                type='primary' 
                icon='check'
                // eslint-disable-next-line
                disabled={Number(this.state.task_status) === 2 ? true : false}
              >
                {Number(this.state.task_status) ? '已完成' : '提交完成'}
              </Button>
            </Popconfirm>
          </section>
          <TextArea placeholder="请填写备注"  defaultValue={remark} autosize={{ minRows: 6 }} onChange={this.handleRemarkChange} />
          <section style={{marginTop: 16, textAlign: 'center'}}>
            <Button type='primary' size='large' block onClick={this.handleRemarkSubmit}>提交</Button>
          </section>
        </Modal>
      </section>
    )
  }
}

export default StaffPersonal